<template>
  <div class="user">
    <PageSearch
      :searchFormConfig="userSearchFormConfig"
      @handleSearchClick="handleSearchClick"
      @handleResetClick="handleResetClick"
    />
    <PageContent
      :tableConfig="userTableConfig"
      :pageName="pageName"
      ref="pageContentRef"
      @addHandleClick="addHandleClick"
      @editHandleClick="editHandleClick"
    >
      <template #enable="{ row }">
        <el-tag :type="row.enable ? 'success' : 'danger'">{{
          row.enable ? '启用' : '禁用'
        }}</el-tag>
      </template>
    </PageContent>
    <PageModal
      :pageModalConfig="pageModalConfig"
      :defaultFormData="defaultFormData"
      :pageName="pageName"
      ref="pageModalRef"
    ></PageModal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue';
import PageContent from '@/components/page-content/page-content.vue';
import PageModal from '@/components/page-modal/page-modal.vue';
import { userSearchFormConfig } from './config/searchConfig';
import { userTableConfig } from './config/contentConfig';
import { userPageModalConfig } from './config/pageModalConfig';
import { useContentData } from '@/hooks/useContentData';
import { usePageModal } from '@/hooks/usePageModal';
import { computed } from 'vue';
import { useStore } from '@/store';
const pageName = 'users';
const [pageContentRef, handleSearchClick, handleResetClick] = useContentData();

const addCallback = () => {
  pageModalRef.value.title = '新建用户';
  const hiddenItme = userPageModalConfig.formItems.find(
    (item) => item.field === 'password'
  );
  if (hiddenItme) {
    hiddenItme.isHidden = false;
    console.log(hiddenItme, '新建');
  }
};
const editCallback = () => {
  pageModalRef.value.title = '修改用户';
  const hiddenItme = userPageModalConfig.formItems.find(
    (item) => item.field === 'password'
  );
  // hiddenItme!.isHidden = true;
  if (hiddenItme) {
    hiddenItme.isHidden = true;
    console.log(hiddenItme, '修改');
  }
};
// 新建用户下获取角色列表和部门列表
const store = useStore();
const pageModalConfig = computed(() => {
  const departmentOptions = userPageModalConfig.formItems.find(
    (item) => item.field === 'departmentId'
  );
  const roleOptions = userPageModalConfig.formItems.find(
    (item) => item.field === 'roleId'
  );
  departmentOptions!.other.options = store.state.entireDepartment.map(
    (item) => {
      return {
        label: item.name,
        value: item.id
      };
    }
  );
  // console.log(departmentOptions);
  roleOptions!.other.options = store.state.entireRole.map((item) => {
    return {
      label: item.name,
      value: item.id
    };
  });
  return userPageModalConfig;
});

const [defaultFormData, pageModalRef, addHandleClick, editHandleClick] =
  usePageModal(addCallback, editCallback);
</script>

<style scoped lang="less"></style>
